import React, { PropTypes, Component } from 'react';
import Table from './Table'
import { getAuthShop, ROOTURL_TABLE } from './../publicAPI/publicAPI';
import styles from './SimpleTable.css';

class ShopCommission extends Component {
    constructor(props) {
        super(props);
        this.state = {
            gripRewSum: 0,  //提成总额
            withdrawSum: 0  //提现总额
        }
    }
    componentDidMount() {
        this.getCommissionSum();
    }

    getCommissionSum() {
        fetch(`${ROOTURL_TABLE}cafune/grip/allgriprewdata.api`, {
            method: 'GET',
            headers: {
                "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
            }
        }).then((response) => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('获取门店提成数据失败')
            }
        }).then((data) => {
            this.setState({
                gripRewSum: data.gripRewSum,
                withdrawSum: data.withdrawSum
            })
        }).catch((error) => {
            alert("获取服务器内容失败");
        })
    }

    //render thead
    tHead() {
        let data = [
            { name: "提成总额" },
            { name: "提现总额" }
        ]
        const _width = {
                "0": "50%",
                "1": "50%"
        }

        return data.map((item, index) => {
            return <th style = {{ width: _width[index], backgroundColor: 'rgba(0,153,255,1)', border: 'none'}}
                        role = "1"
                        key = {index}> {item.name} </th>
        })
    }

    tBody() {
        return( <tr key = { 1 }>
                <td> {this.state.gripRewSum} </td>
                <td> {this.state.withdrawSum} </td>
         </tr>)
    }

    render() {
      return (
        <div>
          <div>
              <Table tHead={this.tHead.call(this)} tBody={this.tBody.bind(this)()} style={{width: '90%'}}/>
          </div>
        </div>
      );
    }
}
export default ShopCommission;
